<template>
	<NavBar :obj="{ title: '卖单申诉', color: '#000', backgroundColor: '#fff' }" />

	<view class="layout-box">
		<view class="layout">
			<textarea class="inp textarea" placeholder-class="place-inp" placeholder="请填写您遇到的问题" v-model="formRef.content"></textarea>
			<Upload v-model="files" :maxCount="5" @change="handleChange" @success="handleSuccess" @error="handleError" @delete="handleDelete" />
		</view>
	</view>

	<view class="btn" @click="appealTradeOffline">
		<text>提交</text>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { port, imgUrl, goUrl, hint, loading, closeLoading } from '/service/port';
	import { goBack } from '../../service/port';
	import Upload from '/components/Uploads.vue';
	import { useThemeStore } from '@/stores/theme';
	import { onLoad } from '@dcloudio/uni-app';
	const id = ref('');
	onLoad((e) => {
		formRef.value.id =  e.id;
	});
	const theme = useThemeStore();

	const formRef = ref({
		id: '',
		content: '',
		images: ''
	});
	const files = ref([]);
	const handleChange = (event) => {
		const images = files.value.map((i) => {
			return i.url;
		});
		formRef.value.appeal_img = images.length > 0 ? images.join(',') : '';
	};

	async function appealTradeOffline() {
		if (!formRef.value.content) {
			hint('请填写您遇到的问题');
			return false;
		}

		loading();
		let res = await port('appealTradeOffline', formRef.value);
		setTimeout(() => {
			closeLoading();
			hint(res.msg);
			formRef.value = {
				content: '',
				appeal_img: ''
			};
			files.value = [];
			goBack();
		});
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	.layout-box {
		background: #ffffff;
		border-radius: 20rpx;
		margin: 26rpx 30rpx;
		margin-bottom: 50rpx;
		padding: 0 23rpx;
		.layout {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eeeeee;
			// display: flex;

			// justify-content: space-between;
			&:last-child {
				border-bottom: none;
			}
			.label {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				width: 27%;
			}
			.inp {
				font-size: 28rpx;
				color: #333333;
				flex: 1 1 0%;
			}
			.place-inp {
				color: #bdbdbd;
				flex: 1 1 0%;
			}
			.textarea {
				height: 250rpx;
				width: 100%;
			}
			.icon {
				margin-right: 30rpx;
			}
		}
	}
	.btn {
		background: $theme-bg-btn-color;
		border-radius: 44rpx;
		padding: 20rpx 0;
		text-align: center;
		margin: 30rpx;
		> image {
			width: 20rpx;
			height: 20rpx;
			margin-right: 15rpx;
		}
		> text {
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
		}
	}
	.record {
		color: $theme-color;
		font-size: 26rpx;
		margin: 50rpx;
		.icon {
			margin-top: 5rpx;
			margin-left: 8rpx;
		}
	}
	.desc {
		margin: 50rpx 40rpx 114rpx 40rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}
</style>
